<template>
    <div class="cart">
        <h2>购物车</h2>
        <!-- 遍历购物车中的商品并渲染每个商品的详细信息 -->
        <TransitionGroup name="fade">
            <div class="cart-item" v-for="item in props.items" :key="item.id">
                <h3>{{ item.name }}</h3>
                <p>数量：{{ item.quantity }}</p>
                <p>价格：{{ item.price }}元</p>
                <!-- 点击按钮移除购物车中的商品 -->
                <button @click="removeItem(item.id)">移除</button>
            </div>
        </TransitionGroup>
    </div>
</template>

<script setup>
// 定义接收的 props，包含购物车商品数组
const props = defineProps(['items'])

// 定义一个 emit 用于触发事件
const emit = defineEmits(['remove-item']);

// 定义一个函数用于移除商品
const removeItem = (itemId) => {
    emit('remove-item', itemId) // 抛出 'remove-item' 事件，传递商品 ID
}

</script>

<style scoped>
.cart {
    margin-bottom: 20px; /* 设置购物车底部的间距 */
}

.cart-item {
    border: 1px solid #ccc; /* 为每个购物车项添加边框 */
    padding: 10px; /* 设置内边距 */
    margin-bottom: 10px; /* 每个购物车项之间的间距 */
}

/* 定义 fade 动画的进入和离开效果 */
.fade-enter-from,
.fade-leave-to {
    opacity: 0; /* 设置初始透明度 */
    transform: rotateY(180deg); /* 初始旋转效果 */
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s, transform 0.5s; /* 设置过渡效果持续时间 */
}
</style>